<template>
<el-container style="height:100%;width: 100%">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246);height: 100%;">
        <el-menu :default-openeds="['1']" router>
            <el-submenu index="1">
                <template slot="title"><i class="el-icon-message"></i>首页</template>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title"><i class="el-icon-menu"></i>内容管理</template>
                    <el-menu-item index="/backstage/category">分类管理</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
                <template slot="title"><i class="el-icon-setting"></i>文章管理</template>
                <el-menu-item index="/backstage/article/title">文章分类管理</el-menu-item>
                <el-menu-item index="/backstage/article/list">文章列表管理</el-menu-item>
                <el-menu-item index="/backstage/article/edit">文章编辑管理</el-menu-item>
            </el-submenu>
        </el-menu>
    </el-aside>
    <el-container class="flex flex-direction">
            <router-view></router-view>
    </el-container>
</el-container>
</template>
<script>
    export default {
        data() {
            return {

            }
        }
    };
</script>


<style scoped lang="stylus">
    .el-header
        background-color: #B3C0D1;
        width: 100%
        height: 100px
        color: #333;
        line-height: 60px;


    .el-aside
        color: #333;
    .container
        margin-top: 100px
</style>
